<template>
  <div class="subchild">
    <twoHead title="注册"></twoHead>

    <van-form @submit="onSubmit" class="" ref="form">
      <van-field
        v-model="register.username"
        name="username"
        label="用户名"
        placeholder="请填写用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { validator: checkUsername, message: '用户名已被注册' },
        ]"
      />
      <van-field
        v-model="register.phone"
        name="phone"
        label="手机号码"
        placeholder="请填写手机号码"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { pattern: phoneReg, message: '请填写正确的手机号码' },
          { validator: checkPhone, message: '手机号已被注册' },
        ]"
      />
      <van-field
        readonly
        clickable
        name="birthday"
        :value="value"
        label="出生日期"
        placeholder="点击选择出生日期"
        @click="showPicker = true"
        :rules="[
          { required: true, message: '请选择出生日期' },
        ]"

        />
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择出生日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            />
            </van-popup>
        <van-field
        v-model="register.password" 
        name="password"
        label="密码"
        placeholder="密码"
        :type="type_1"
        :right-icon	= "type_1=='password'?'closed-eye':'eye-o'"
        @click-right-icon="type_1=='password'?type_1='text':type_1='password'"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: passReg, message: '请填写正确的密码' },
        ]"
      />
      <van-field
        v-model="register.dbpassword"
        :type="type_2"
        name="dbpassword"
        label="确认密码"
        placeholder="密码"
        :right-icon	= "type_2=='password'?'closed-eye':'eye-o'"
        @click-right-icon="type_2=='password'?type_2='text':type_2='password'"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: passReg, message: '请填写正确的密码' },
          { validator: checkPassEqual, message: '两次输入的密码不一致' },
        ]"
      />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>



<script>
import { phoneReg, passReg } from "@/utils";
import { Notify } from "vant";
import { mapState,mapMutations } from "vuex";

export default {
  data() {
    return {
      register: {},
      active: 1,
      phoneReg,
      passReg,
      obj: {},
      type_1:"password",
      type_2:"password",
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(2021, 0, 1),
      currentDate: new Date(),
      value:'',
      showPicker:false,
      lxx:true,
    };
  },
  methods: {
    ...mapMutations(['setFootPlayer']),
    onConfirm(time) {
        this.value = forMat(time);
        this.showPicker = false;
    },
    checkPassEqual(val) {
      return this.register.password == val;
    },
    checkPhone(val){
        return this.$ajax.checkPhone(this.register).then(res=>{
            if(res.code){
                return false
            }else{
                return true
            }
        })
    },
    checkUsername(val){
        return this.$ajax.checkUsername(this.register).then(res=>{
            if(res.code){
                return false
            }else{
                return true
            }
        })
    },
    onSubmit(values) {
      console.log("submit", values);
      this.$ajax.getRegister(values, {}).then((res) => {
        if (res.code == 200) {
          Notify({ type: "success", message: res.msg });
          this.$router.push({ name: "login", query: { phone: values.phone } });
        } else {
          Notify({ type: "danger", message: res.msg });
        }
      });
    },
    onCaptcha(values) {
      if (values.length != 11) {
        alert("手机号码输入有误");
      } else {
        this.$ajax.getCaptcha({ phone: values }, {}).then((res) => {
          console.log(res);
        });
      }
    },
  },
  mounted(){
    this.setFootPlayer(false);
  }
};


function forMat(date) {
  var time = new Date(date);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var day = time.getDate();
  return `${year}-${month > 9 ? month : `0${month}`}-${day > 9 ? day : `0${day}`}`
}
</script>

<style lang="scss" scoped>
::v-deep .van-tab--active {
  // 样式穿透   因为加了 scoped 不穿透无法改变样式
  .van-tab__text {
    color: #ff5f16;
  }
}
.subchild{
    background: #fff;
    height: 100vh;
    padding-top: 46px;
}
</style>